
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>




<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>青麦门店系统 |订单详情</title>
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<%@ include file="../include/inc_head.jsp"%>
<!-- ================== END BASE CSS STYLE ================== -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/pace/pace.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/orderStatus.css"> 
<!-- ================== END BASE JS ================== -->
</head>
<style>
.form-horizontal.form-bordered .form-group>.control-label {
    padding: 20px 158px 15px;
    border-right: 1px solid #eee;
    margin-right: -1px;
}
.form-horizontal.form-bordered .form-group>div {
    padding: 20px;
    border-left: 1px solid #eee;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle; 
    border-top: 1px solid #ddd;
}
</style>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->

	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #header -->
		<%@ include file="../include/inc_header.jsp"%>
		<!-- end #header -->

		<!-- begin #sidebar -->
		<%@ include file="../include/inc_left.jsp"%>
		<!-- end #sidebar -->

		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">首页</a></li>
				<li class="active">订单详情</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">订单详情</h1>
				<button type="button" class="btn btn-primary m-r-5 m-b-5" onclick="back();">返回</button>
			<!-- end page-header -->
			    <table class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">订单状态</td>
                                </tr>
                            </thead>
                            <tbody>
                            <tr>
                            	<td></td>
                            </tr>
				                   <tr>
				                     <td>
				                           <div id="appStepbar" style="margin-left: 24px;">  
										 <div data-control="Stepbar" class="flowstep" >  
										 <ol class="detail-stepbar flowstep-5" >  
										 
										 <li class="" id="status-1">  
											 <div class="" >  
												 <div class="" >已取消</div>  
												 <div class="step-no" >1</div>  
												 <div class="step-time" >  
												 </div>  
											 </div>  
										 </li>  
										 
										 <li class="step-first" >  
											 <div class="step-done" id="status0">  
												 <div class="step-name" >未确认</div>  
												 <div class="step-no" >1</div>  
												 <div class="step-time" >  
											 	</div>  
										 	</div>  
										 </li>  
										 <li class="" >  
											 <div class="step-done" id="status1">  
												 <div class="step-name" >商家已确认</div>  
												 <div class="step-no" >2</div>  
												 <div class="step-time" >  
											 	</div>  
										 	</div>  
										 </li>  
										 <li class="" >  
											 <div class="step-done" id="status2">  
												 <div class="step-name" >后台已确认</div>  
												 <div class="step-no" >3</div>  
												 <div class="step-time" >  
												 </div>  
											 </div>  
										 </li>  
										  <li class="" >  
											 <div class="step-done" id="status3">  
												 <div class="step-name" >已发运</div>  
												 <div class="step-no" >4</div>  
												 <div class="step-time" >  
											 	</div>  
										 	</div>  
										 </li> 
										  <li class="" >  
											 <div class="step-done" id="status4">  
												 <div class="step-name" >配送中</div>  
												 <div class="step-no" >5</div>  
												 <div class="step-time" >  
												 </div>  
											 </div>  
										 </li> 
										 <li class="" >  
											 <div class="step-cur" id="status5">  
											 <div class="step-name" >已收货</div>  
											 <div class="step-no" >6</div>  
										 </div>  
										 </li>  
										 <li class="step-last" >  
											 <div class="" id="status6">  
											 <div class="step-name" >对账完成</div>  
											 <div class="step-no" >7</div>  
										 <span ></span>  
										 </div>  
										 </li>  
										 </ol>  
										 </div>  
										 </div>
				                     </td>
				                   </tr>
                             </tbody>
                			</table>
			
 					 <div class="table-responsive">
                        <table id="user" class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">订单信息</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width:320px;">订单ID:<a href="#"  style="margin-left: 30px;">${orderMain.orderId}</a></td>
                                    <td >包装物总金额:<a href="#" style="margin-left: 60px;">1.2</a></td>
                                </tr>
                                <tr>
                                    <td style="width:320px;">支付方式:<a href="#" style="margin-left: 30px;">${orderMain.uT }</a></td>
                                    <td>总优惠金额:<a href="#" style="margin-left: 76px;">${orderMain.totalDiscount }</a></td>
                                </tr>
                                <tr>
                                    <td>使用余额:<a href="#" style="margin-left: 86px;">${balanceMoney }</a></td>
                                    <td>优惠券优惠金额:<a href="#" style="margin-left: 46px;">${orderMain.couponDiscount }</a></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">订单来源:<a href="#" style="margin-left: 30px;" >${orderMain.orderFrom}</a></td>
                                    <td>满减类促销优惠金额:<a href="#" style="margin-left: 20px;">${orderMain.promotionDiscount }</a></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">支付状态:<a href="#" style="margin-left: 30px;">${orderMain.payStatus }</a></td>
                                    <td>已支付金额:<a href="#" style="margin-left: 72px;">${orderMain.paidMoney }</a></td>
                                </tr>
                                <tr>
                                    <td style="width:320px;">实收金额:<a href="#" style="margin-left: 30px;">${orderMain.receivePrice }</a></td>
                                    <td>分配状态:<a href="#" style="margin-left: 84px;">${orderMain.allotStatus }</a></td>
                                </tr>
                                 <tr>
                                    <td style="width:320px;">下单时间:<a href="#" style="margin-left: 30px;">${orderTime }</a></td>
                                      <td style="width:320px;">运费:<a href="#" style="margin-left: 109px;">${orderMain.freightFee }</a></td>
                                </tr>
                            </tbody>
                        </table>
                          <table class="table table-bordered table-striped">
                            <thead>
                             <tr>
                                    <td style="width:220px;font-weight:900;font-size: 16px;">收件人信息</td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                         <tr>
                                    <td style="width:220px;">收件人</td>
                                    <td><a href="#" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter your Firstname">${companyInfo.name }</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">收件人地址</td>
                                    <td><a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">${ companyInfo.address}</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">收件人电话</td>
                                    <td><a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">${ companyInfo.mobile}</a></td>
                                </tr>
                                <tr>
                                    <td style="width:220px;">备注</td>
                                    <td><a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex">${orderMain.remark }</a></td>
                                </tr>
                                   </tbody>
                        </table>
                    </div>
                            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                        <div class="panel-heading" style="background: #a5bcd2;">
                            <h4 class="panel-title">订单商品</h4>
                        </div>
                        <div class="panel-body">
                        	<div class="table-responsive">
								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>商品名称</th>
											<th>商品规格</th>
											<th>商品数量</th>
											<th>商品单价（元）</th>
											<th>活动类型</th>
											<th>促销优惠金额</th>
											<th>优惠券优惠金额</th>
											<th>总优惠金额</th>
											<th>总价（元）</th>
										</tr>
									</thead>
									<tbody >
									<c:forEach items="${product}" var="li">
										<tr >
											<td>${li.orderItem.id }</td>
											<td><span style="margin-left: 5px;">${li.orderItem.skuName }</span></td>
											<td>${li.orderItem.skuFormat }</td>
											<th>${li.orderItem.num }</th>
											<th>${li.orderItem.price }</th>
											<th>${li.orderItem.promotionType }</th>
											<th>${li.orderItem.promotionDiscount }</th>
											<th>${li.orderItem.couponDiscount }</th>
											<th>${li.orderItem.totalDiscount }</th>
											<th>
											<span class="text-warning"> 
													<i class="fa fa-jpy"></i>${li.orderItem.goodsAmount }
											</span>
											</th>
										</tr>
									</c:forEach>
									</tbody>
									<tfoot>
									<tr>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th></th>
										<th>
											<span class="text-warning"> 
													<i class="fa fa-jpy"></i> 总计：${orderMain.goodsAmount }（元）
											</span>
										</th>
									</tr>
									</tfoot>
								</table>
                            </div>
                        </div>
                    </div>

		</div>
		<!-- end #content -->

		<%@ include file="../include/inc_footer.jsp"%>
		<!-- begin scroll to top btn -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->

	<!-- ================== BEGIN BASE JS ================== -->
	<%@ include file="../include/inc_foot.jsp"%>

	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="/assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
	<script src="/assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
	<script src="/assets/js/table-manage-default.demo.min.js"></script>
	<script src="/assets/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->

	<script>
		$(document).ready(function() {
			App.init();
			TableManageDefault.init();
			initStatus(${orderMain.status});
		});
		
		function back(){
			history.go(-1);
		}
		
		function initStatus(index){
		if(index==-1){
			$('#status-1').show();
		for(var j=0;j<7;j++){
			$('#status'+j).hide();
		}
		return;
		}
			$('#status-1').hide();
			$("#status"+index).attr("class","step-cur");
		if(index>0){
		for(var i=0;i<=index-1;i++){
			$("#status"+i).attr("class","step-done");
		}
		for(var a=index+1;a<=6;a++){
			$("#status"+a).attr("class","ss");
		}
		}else{
			$("#status0"+index).attr("class","step-cur");
		for(var s=1;s<7;s++){
			$("#status"+s).attr("class","ss");
		}
		}
		}
	</script>

</body>
</html>


